<template>
  <div class="login">
    <el-header style="font-size: 30px; margin-top: 10px"> UNI-AMIN </el-header>
    <!-- <hr style="color:#dddddd"> -->
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleFormref"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input
          type="username"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm"
          >立即登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      loading: false,
      ruleForm: {
        password: "",
        username: "",
      },
      obj:'',
      rules: {
        password: [{ message: "请输入密码", trigger: "blur", required: true }],
        username: [{ message: "请输入用户名", trigger: "blur", required: true }],
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    submitForm() {
        this.$refs.ruleFormref.validate((valid)=>{
      //   if(!valid) return;
      this.loading = true;

      //   this.$axios.post('http://ceshi5.dishait.cn/admin/login',{
      //       username:this.ruleForm.username,
      //       password:this.ruleForm.password,
      //       token:'settoken'
      //   })
      this.$axios.post("/admin/login",this.ruleForm).then((res) => {
        // console.log(res);
        // this.obj=res.data.data.token
        var obj = {
          username: res.username,
          password: res.password,
          token: res.data.token,
        };
        // console.log(this.obj);
        console.log(res.data.token)
         this.$router.push("/home");
         this.$store.commit("settoken", obj);
         this.$toast.success("登录成功");
        // if (res.status == 200) {
        //   this.$store.commit("settoken", obj);
        //   this.$router.push("/home");
        //   this.$toast.success("登录成功");
        // } else {
        //   this.poading = false;
        //   this.$toast.fail("登录失败");
        //   return false;
        // }
      });
      //   .then((res)=>{
      //       console.log(res)

        })
      //   })
    },
  },
  // 以下是生命周期钩子 注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.login {
  width: 40%;
  border: 1px solid #dddddd;
  margin-left: 40%;
  margin-top: 10%;
}
</style>
